<template>
  <div id="Home">
    <!-- menu --------------------------------------------->
    <div id="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#000"
        active-text-color="#e4192e"
        @select="handleSelect"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/Workplace">工作台</el-menu-item>
        <div class="user">
          <span>未登录，请前往登录。</span>
          <el-button
            type="danger"
            id="login"
            @click="loginVisible = true"
            size="mini"
          >
            <i class="el-icon-user"></i>登录</el-button
          >
          <el-button id="register" @click="registerVisiable=true" size="mini">注册</el-button>
        </div>
      </el-menu>
    <!-- router-view---------------------------------------------------------------- -->
    <router-view/>
    </div>
    <!-- dialog----------------------------------------------------------------- -->
    <el-dialog
      title="登录"
      :visible.sync="loginVisible"
      width="35%"
      id="login_dialog"
      :before-close="handleClose"
    >
      <div class="dialog-body">
        <span style="font-size: 16px">用户名：</span
        ><el-input
          class="dialog-input"
          v-model="login.username"
          placeholder="请输入用户名"
          style="margin: 15px auto"
        ></el-input>
        <span style="font-size: 16px">密码：</span
        ><el-input
          class="dialog-input"
          placeholder="请输入密码"
          v-model="login.password"
          style="margin: 15px auto"
          show-password
        ></el-input>
      </div>
      <div id="loginbut" class="dialog-footer">
        <el-button class="dialog-button lb" @click="loginVisible = false"
          >取 消</el-button
        >
        <el-button class="dialog-button lb" type="danger" @click="Login"
          >登录</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">

        <el-button  class="dialog-button lb" size="small" type="info" @click="pagepush('/AdminLogin')" 
          >管理员登录</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="注册" :visible.sync="registerVisiable" width="40%">
      <div class="dialog-body">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名：">
            <el-input
              placeholder="请输入用户名"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input
              placeholder="请输入密码"
              v-model="form.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄：">
            <el-select
              v-model="form.age"
              placeholder="请选择"
            >
              <el-option
                v-for="i in 100"
                :key="i"
                :label="i"
                :value="i"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio v-model="form.sex" label="男"></el-radio>
            <el-radio v-model="form.sex" label="女"></el-radio>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              placeholder="请输入联系方式"
              v-model="form.tel"
            ></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱">
            <el-input
              placeholder="请输入电子邮箱"
              v-model="form.email"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="register()">立即注册</el-button>
            <el-button @click="registerVisiable=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      activeIndex: "1",
      islogin: false,
      loginVisible: false,
      registerVisiable:false,
      login: {
        username: "",
        password: "",
      },
      form: {
        username: "",
        password: "",
        age: 19,
        sex: "男",
        tel: "",
        email: "",
      },
      user: "",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push({
        path: keyPath[0],
      });
    },
    Login() {},
    pagepush(path) {
      this.$router.push({
        path: path,
      });
    },
    register(){

    }
  },
};
</script>
<style scoped>
.user {
  float: right;
  height: 60px;
  line-height: 60px;
  margin-right: 2%;
}
#login {
  margin-left: 10px;
}
#loginbut {
  text-align: center;
}
.lb {
  margin: 10px 20px;
}
.dialog-body {
  width: 70%;
  margin: auto auto;
}
</style>
